<template>
  <div class="wrap">
    <header>
      <div class="headertop">
        <div class="header-img">
          <v-back></v-back>
        </div>
        <h1>手机注册</h1>
        <div class="topradius">
          <i class="iconfont icon-xiaochengxu-gengduo"></i>
          <i class="topborder"></i>
          <i class="iconfont icon-xiaochengxu-guanbi"></i>
        </div>
      </div>
    </header>
    <div class="login-bg">
      <div class="login-con">
        <div>
          <img src="../assets/Image/m-index/orange-logo.png" alt="" />
        </div>
        <form action="">
          <div>
            <input
              type="text"
              name=""
              id=""
              placeholder="手机号"
              v-model="user.phone"
            />
          </div>
          <div>
            <input
              type="text"
              name=""
              id=""
              placeholder="昵称"
              v-model="user.nickname"
            />
          </div>
          <div class="yzm">
            <input
              type="text"
              name=""
              id=""
              placeholder="密码"
              v-model="user.password"
            />
          </div>
        </form>
        <div class="login-btn" @click="register">注 册</div>
      </div>
    </div>
    <div class="wx-foot">
      <div>
        <img src="../assets/Image/m-index/foot-bottom.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { register } from "../request/api";
export default {
  data() {
    return {
      user: {
        phone: "",
        nickname: "",
        password: "",
      },
    };
  },
  methods: {
    register() {
      // console.log(this.user.phone, this.user.nickname, this.user.password);
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.user.phone)) {
        alert("请输入正确的手机号");
        return;
      }
      if (!this.user.phone || !this.user.nickname || !this.user.password) {
        alert("请输入必填项");
      } else {
        register(this.user).then((res) => {
          console.log(res, "22322");
          if (res.data.code == 200) {
            sessionStorage.setItem("islogin", JSON.stringify(res.data.list));
            this.$router.push("/login");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.login-bg {
  background-color: #f2f2f2;
  text-align: center;
  overflow: hidden;
  height: 13.8rem;
}

.login-con {
  margin: 0.2rem;
  background: #fff;
  text-align: center;
  height: 13.4rem;
}

.login-con img {
  margin-top: 4.88rem;
  margin-bottom: 0.8rem;
  width: 3.64rem;
}

form div {
  margin: 0 0.5rem;
}

input {
  border-bottom: 1px solid #eee;
  width: 100%;
  height: 0.64rem;
  font-size: 0.24rem;
  color: #666666;
  line-height: 0.24rem;
}

label {
  display: inline-block;
  background: #cccccc;
  width: 1.6rem;
  height: 0.48rem;
  font-size: 0.2rem;
  color: #ffffff;
  line-height: 0.48rem;
}

.yzm {
  position: relative;
}

input::placeholder {
  font-size: 0.24rem;
  color: #666666;
  line-height: 0.24rem;
}

.login-btn {
  width: 6.1rem;
  height: 0.98rem;
  background: #cccccc;
  font-size: 0.32rem;
  color: #ffffff;
  line-height: 0.98rem;
  margin: 0.4rem auto;
}

.wx-foot {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -1.34rem;
}

.wx-foot img {
  width: 2.68rem;
  margin: 0 auto;
}
</style>
